import { useEffect, useState } from 'react';
import { VIDEOSOURCE } from '../microPalette/mockData/firstFrameImgBase64';
import { getFrameImage } from '../utils/videoBase';
function createVideoFirstFrameImage() {
  const [imageUrl, setImageUrl] = useState('');
  useEffect(() => {
    async function getFirtFrameImage() {
      const url = await getFrameImage(VIDEOSOURCE, 0, 'base64');
      console.log('url:', url);
      setImageUrl(url as string);
    }

    getFirtFrameImage();
  }, []);

  return (
    <div>
      <div style={{ marginTop: '30px' }}>
        <p>视频第一帧图 960 * 960</p>
        <img src={imageUrl} alt="" />
      </div>
    </div>
  );
}

export default createVideoFirstFrameImage;
